@use 'sass:list';
@use 'sass:map';
@use 'sass:color';

$sm: 576px;
$md: 768px;
$lg: 992px;
$xl: 1200px;
$xxl: 1600px;
$colors: (
    'primary': #1d4aff,
    'danger-highlight': rgba(#db3707, 0.1),
    'danger-lighter': #ffa599,
    'danger-light': #df4b20,
    'danger': #db3707,
    'danger-dark': #992705,
    'warning-highlight': rgba(#f7a501, 0.1),
    'warning': #f7a501,
    'warning-dark': #e09423,
    'highlight': #e49f2c,
    'success-highlight': rgba(#388600, 0.1),
    'success-light': #5f9d32,
    'success': #388600,
    'success-dark': #245700,
    'muted': #5f5f5f,
    'muted-alt': #747ea1,
    'mark': hsl(42deg 93% 86% / 80%),
    'white': #fff,
    'bg-light': #fff,
    'side': #fafaf9,
    'mid': #f2f2f2,
    'border': rgb(0 0 0 / 15%),
    'border-light': rgb(0 0 0 / 8%),
    'border-bold': rgb(0 0 0 / 24%),
    'transparent': transparent,
    'link': var(--primary-3000),
    // Colors of the PostHog logo
    'brand-blue': #1d4aff,
    'brand-red': #f54e00,
    'brand-yellow': #f9bd2b,
    'brand-key': #000,

    // PostHog 3000
    'text-3000-light': #111,
    'text-secondary-3000-light': rgba(#111, 0.7),
    'muted-3000-light': rgba(#111, 0.6),
    'trace-3000-light': rgba(#111, 0.25),
    'primary-3000-light': #f54e01,
    'primary-highlight-light': rgba(#f54e01, 0.1),
    'primary-3000-hover-light': #f54e01,
    'primary-3000-active-light': #f54e01,

    'secondary-3000-light': rgba(#cfd1c2, 0.6),
    'secondary-3000-hover-light': #cfd1c2,
    'accent-3000-light': #eeefe9,
    'bg-3000-light': #f3f4ef,
    'border-3000-light': #dadbd2,
    'border-bold-3000-light': #c1c2b9,
    'glass-bg-3000-light': #e4e5deb3,
    'glass-border-3000-light': #e4e5de,

    'link-3000-light': #f54e00,
    'primary-3000-frame-bg-light': #eb9d2a,
    'primary-3000-button-bg-light': #fff,
    'primary-3000-button-border-light': #b17816,
    'primary-3000-button-border-hover-light': #8e5b03,

    'secondary-3000-frame-bg-light': #e1dddd,
    'secondary-3000-button-bg-light': #f3f4ef,
    'secondary-3000-button-border-light': #ccc,
    'secondary-3000-button-border-hover-light': #aaa,

    'danger-3000-frame-bg-light': #f54e0080,
    'danger-3000-button-border-light': #e96b30,
    'danger-3000-button-border-hover-light': #f54e00,

    'shadow-elevation-3000-light': 0 3px 0 var(--border-3000-light),
    'shadow-elevation-3000-dark': 0 3px 0 var(--border-3000-dark),
    'text-3000-dark': #fff,
    'text-secondary-3000-dark': rgba(#fff, 0.7),
    'muted-3000-dark': rgba(#fff, 0.5),
    'trace-3000-dark': rgba(#fff, 0.25),
    'primary-3000-dark': #f7a503,
    'primary-highlight-dark': rgba(#f7a503, 0.1),
    'primary-3000-hover-dark': #f7a503,
    'primary-3000-active-dark': #f7a503,
    'primary-alt-highlight-light': #e5e7e0,

    'secondary-3000-dark': #1d1f27,
    'secondary-3000-hover-dark': #575d77,
    'accent-3000-dark': #21242b,
    'bg-3000-dark': #1d1f27,
    'border-3000-dark': #35373e,
    'border-bold-3000-dark': #3f4046,
    'glass-bg-3000-dark': #24262a99,
    'glass-border-3000-dark': var(--border-3000-dark),
    'link-3000-dark': #f1a82c,

    'primary-3000-frame-bg-dark': #926826,
    'primary-3000-button-bg-dark': #e0a045,
    'primary-3000-button-border-dark': #b17816,
    'primary-3000-button-border-hover-dark': #8e5b03,
    'primary-alt-highlight-dark': #232429,

    'secondary-3000-frame-bg-dark': #323232,
    'secondary-3000-button-bg-dark': #1d1f27,
    'secondary-3000-button-border-dark': #4a4c52,
    'secondary-3000-button-border-hover-dark': #5e6064,

    'danger-3000-frame-bg-dark': #f54e0080,
    'danger-3000-button-border-dark': #c44003,
    'danger-3000-button-border-hover-dark': #f54e00,

    // The derived colors
    // `--default` is a pre-3000 alias for "default text color" (`--text-3000` now)
    'default': var(--default),
    'text-3000': var(--text-3000),
    'text-secondary-3000': var(--text-secondary-3000),
    'muted-3000': var(--muted-3000),
    'primary-3000': var(--primary-3000),
    'secondary-3000': var(--secondary-3000),
    'secondary-3000-hover': var(--secondary-3000-hover),
    'accent-3000': var(--accent-3000),
    'bg-3000': var(--bg-3000),
    'primary-highlight': var(--primary-highlight),
    'primary-alt-highlight': var(--primary-alt-highlight),
    'primary-alt': var(--primary-alt),
);

// These vars are modified via SCSS for legacy reasons (e.g. darken/lighten), so keeping as SCSS vars for now.
$_lifecycle_new: map.get($colors, 'primary');
$_lifecycle_returning: map.get($colors, 'success');
$_lifecycle_resurrecting: #a56eff; // --data-lilac
$_lifecycle_dormant: map.get($colors, 'danger');

// root variables are defined as a mixin here because
// the toolbar needs them attached to :host not :root
@mixin root-variables {
    --bg-bridge: #ebece8;

    // Non-color vars
    --radius: 0.375rem;
    --radius-sm: 0.25rem;
    --modal-shadow-elevation: 0px 16px 16px -16px rgb(0 0 0 / 35%);
    --opacity-disabled: 0.6;
    --font-medium: 500;
    --font-semibold: 600;
    --font-sans: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', 'Roboto', 'Helvetica Neue', helvetica, arial,
        sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
    --font-title: 'MatterSQ', -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', 'Roboto', 'Helvetica Neue',
        helvetica, arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
    --font-mono: ui-monospace, 'SFMono-Regular', 'SF Mono', 'Menlo', 'Consolas', 'Liberation Mono', monospace;

    // Dashboard item colors
    --blue: #597dce;
    --purple: #c278cf;
    --green: var(--success);
    --black: var(--text-3000);

    //// Data colors (e.g. insight series). Note: colors.ts relies on these values being hexadecimal
    --data-color-1: #1d4aff;
    --data-color-2: #621da6;
    --data-color-3: #42827e;
    --data-color-4: #ce0e74;
    --data-color-5: #f14f58;
    --data-color-6: #7c440e;
    --data-color-7: #529a0a;
    --data-color-8: #0476fb;
    --data-color-9: #fe729e;
    --data-color-10: #35416b;
    --data-color-11: #41cbc4;
    --data-color-12: #b64b02;
    --data-color-13: #e4a604;
    --data-color-14: #a56eff;
    --data-color-15: #30d5c8;

    // Lifecycle series
    --lifecycle-new: #{$_lifecycle_new};
    --lifecycle-returning: #{$_lifecycle_returning};
    --lifecycle-resurrecting: #{$_lifecycle_resurrecting};
    --lifecycle-dormant: #{$_lifecycle_dormant};
    --lifecycle-new-hover: #{color.adjust($_lifecycle_new, $lightness: -20%)};
    --lifecycle-returning-hover: #{color.adjust($_lifecycle_returning, $lightness: -20%)};
    --lifecycle-resurrecting-hover: #{color.adjust($_lifecycle_resurrecting, $lightness: -20%)};
    --lifecycle-dormant-hover: #{color.adjust($_lifecycle_dormant, $lightness: -20%)};

    // Funnels
    // TODO: unify with lib/colors.ts, getGraphColors()
    --funnel-axis: var(--border);
    --funnel-grid: #ddd;

    // Z-indexes
    --z-bottom-notice: 5100;
    --z-command-palette: 1875;
    --z-force-modal-above-popovers: 1850;
    --z-tooltip: 1070;
    --z-definition-popover: 1064;
    --z-popover: 1063;
    --z-graph-tooltip: 1062;
    --z-modal: 1060;
    --z-hedgehog-buddy: 1059;
    --z-annotation-popover: 1049;
    --z-drawer: 950;
    --z-notifications-popover: 949; // below the TZ aware popover but over the main-nav
    --z-main-nav: 948;
    --z-lemon-sidebar: 940;
    --z-lemon-activation-sidebar: 939;
    --z-mobile-nav-overlay: 931;
    --z-top-navigation: 800;
    --z-content-overlay: 488;
    --z-raised: 5;

    // Toasts
    // Update and override from react-toastify
    // which attaches these variables to :root
    // which means they aren't available in the toolbar
    --toastify-color-dark: var(--accent-3000-dark);
    --toastify-color-light: var(--bg-light);
    --toastify-color-info: var(--primary);
    --toastify-color-success: var(--success);
    --toastify-color-warning: var(--warning);
    --toastify-color-error: var(--danger);
    --toastify-color-progress-info: var(--toastify-color-info);
    --toastify-color-progress-success: var(--toastify-color-success);
    --toastify-color-progress-warning: var(--toastify-color-warning);
    --toastify-color-progress-error: var(--toastify-color-error);
    --toastify-toast-background: var(--bg-light);
    --toastify-toast-width: 26rem;
    --toastify-toast-min-height: 3.5rem;
    --toastify-toast-max-height: 16rem;
    --toastify-text-color-light: #757575;

    // In-app prompts
    --in-app-prompts-width: 26rem;
    --lettermark-1-bg: #dcb1e3;
    --lettermark-1-text: #572e5e;
    --lettermark-2-bg: #ffc4b2;
    --lettermark-2-text: #3e5891;
    --lettermark-3-bg: #fdedc9;
    --lettermark-3-text: #3e5891;
    --lettermark-4-bg: #3e5891;
    --lettermark-4-text: #ffc4b2;
    --lettermark-5-bg: #8da9e7;
    --lettermark-5-text: #572e5e;
    --lettermark-6-bg: #572e5e;
    --lettermark-6-text: #dcb1e3;
    --lettermark-7-bg: #ffc035;
    --lettermark-7-text: #35416b;
    --lettermark-8-bg: #ff906e;
    --lettermark-8-text: #2a3d65;

    // Modals
    --modal-backdrop-blur: 5px; // Half the value in Figma as blur is calculated differently there it seems
    --modal-backdrop-color: rgb(0 0 0 / 20%);
    --modal-transition-time: 200ms;

    // Tooltips
    --tooltip-bg-light: #2d2d2d;
    --tooltip-bg-dark: #656d81;

    // Notebooks
    --notebook-popover-transition-properties: 150ms cubic-bezier(0, 0.5, 0.5, 1);
    --notebook-column-left-width: 27rem;
    --notebook-column-right-width: 20rem;

    // Design System colors
    @each $name, $hex in $colors {
        --#{$name}: #{$hex};
    }
}

// defined here so that they can be shared with the toolbar
@mixin light-mode-3000-variables {
    --text-3000: var(--text-3000-light);
    --text-secondary-3000: var(--text-secondary-3000-light);
    --muted-3000: var(--muted-3000-light);
    --trace-3000: var(--trace-3000-light);
    --primary-3000: var(--primary-3000-light);
    --primary-highlight: var(--primary-highlight-light);
    --primary-3000-hover: var(--primary-3000-hover-light);
    --primary-3000-active: var(--primary-3000-active-light);
    --secondary-3000: var(--secondary-3000-light);
    --secondary-3000-hover: var(--secondary-3000-hover-light);
    --accent-3000: var(--accent-3000-light);
    --bg-3000: var(--bg-3000-light);
    --border-3000: var(--border-3000-light);
    --border-light-opaque: #eee;
    --border-bold-3000: var(--border-bold-3000-light);
    --glass-bg-3000: var(--glass-bg-3000-light);
    --glass-border-3000: var(--glass-border-3000-light);
    --bg-light: #fff;
    --bg-table: #f9faf7;
    --link: var(--link-3000-light);
    --shadow-elevation-3000: var(--shadow-elevation-3000-light);
    --primary-3000-frame-bg: var(--primary-3000-frame-bg-light);
    --primary-3000-button-bg: var(--primary-3000-button-bg-light);
    --primary-3000-button-border: var(--primary-3000-button-border-light);
    --primary-3000-button-border-hover: var(--primary-3000-button-border-hover-light);
    --primary-alt-highlight: var(--primary-alt-highlight-light);
    --secondary-3000-frame-bg: var(--secondary-3000-frame-bg-light);
    --secondary-3000-button-bg: var(--secondary-3000-button-bg-light);
    --secondary-3000-button-border: var(--secondary-3000-button-border-light);
    --secondary-3000-button-border-hover: var(--secondary-3000-button-border-hover-light);
    --danger-3000-frame-bg: var(--danger-3000-frame-bg-light);
    --danger-3000-button-border: var(--danger-3000-button-border-light);
    --danger-3000-button-border-hover: var(--danger-3000-button-border-hover-light);
    --tooltip-bg: var(--tooltip-bg-light);
}

// defined here so that they can be shared with the toolbar
@mixin dark-mode-3000-variables {
    --text-3000: var(--text-3000-dark);
    --text-secondary-3000: var(--text-secondary-3000-dark);
    --muted-3000: var(--muted-3000-dark);
    --trace-3000: var(--trace-3000-dark);
    --primary-3000: var(--primary-3000-dark);
    --primary-highlight: var(--primary-highlight-dark);
    --primary-3000-hover: var(--primary-3000-hover-dark);
    --primary-3000-active: var(--primary-3000-active-dark);
    --secondary-3000: var(--secondary-3000-dark);
    --secondary-3000-hover: var(--secondary-3000-hover-dark);
    --accent-3000: var(--accent-3000-dark);
    --bg-3000: var(--bg-3000-dark);
    --border-3000: var(--border-3000-dark);
    --border-light-opaque: #1e2028;
    --border-bold-3000: var(--border-bold-3000-dark);
    --glass-bg-3000: var(--glass-bg-3000-dark);
    --glass-border-3000: var(--glass-border-3000-dark);
    --bg-light: var(--accent-3000);
    --bg-table: #232429;
    --brand-key: #fff; // In dark mode the black in PostHog's logo is replaced with white for proper contrast
    --link: var(--link-3000-dark);
    --shadow-elevation-3000: var(--shadow-elevation-3000-dark);
    --primary-3000-frame-bg: var(--primary-3000-frame-bg-dark);
    --primary-3000-button-bg: var(--primary-3000-button-bg-dark);
    --primary-3000-button-border: var(--primary-3000-button-border-dark);
    --primary-3000-button-border-hover: var(--primary-3000-button-border-hover-dark);
    --primary-alt-highlight: var(--primary-alt-highlight-dark);
    --secondary-3000-frame-bg: var(--secondary-3000-frame-bg-dark);
    --secondary-3000-button-bg: var(--secondary-3000-button-bg-dark);
    --secondary-3000-button-border: var(--secondary-3000-button-border-dark);
    --secondary-3000-button-border-hover: var(--secondary-3000-button-border-hover-dark);
    --danger-3000-frame-bg: var(--danger-3000-frame-bg-dark);
    --danger-3000-button-border: var(--danger-3000-button-border-dark);
    --danger-3000-button-border-hover: var(--danger-3000-button-border-hover-dark);
    --tooltip-bg: var(--tooltip-bg-dark);
    --data-color-2: #7f26d9;
    --data-color-3: #3e7a76;
    --data-color-4: #bf0d6c;
    --data-color-5: #f0474f;
    --data-color-6: #b36114;
    --data-color-10: #6576b3;
}

// defined here so that they can be shared with the toolbar
@mixin common-variables {
    --primary: var(--primary-3000);
    --muted: var(--muted-3000);
    --default: var(--text-3000);

    // `--muted-alt` can be removed now, as it's the same as `--muted` after the 3000 redesign
    --muted-alt: var(--muted-3000);
    --primary-alt: var(--text-3000);
    --border: var(--border-3000);
    --border-bold: var(--border-bold-3000);
    --data-color-1: #1d4aff;
    --data-color-1-hover: #1a3cf6;
    --data-color-10: #35416b;
}
